<template>
  <el-row :style="'height:'+header+'%;'" id="head" justify="space-between">
    <el-col :span="12">
      <el-row class="rowT">
        <el-col span="12">
          <el-button :icon="Menu" size="large" style="height: 100%;border: none;" @click="coll()">
          </el-button>
        </el-col>
        <el-col span="11">
          <Breadcrumb></Breadcrumb>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="2">
      <el-row  justify="center">
        <el-col id="userUrl" :span=12>
          <el-dropdown>
            <el-avatar shape="square" :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="margin: 5px"></el-avatar>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>前往前台</el-dropdown-item>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item @click="test">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-row id="tag" :style="'height:'+tags+'%'" align="middle">
    <el-col>
      <Tags></Tags>
    </el-col>
  </el-row>
</template>
<script setup>
import {
  Menu
} from '@element-plus/icons-vue'
import Tags from "@/components/adminHome/Tags";
import Breadcrumb from "@/components/adminHome/Breadcrumb";
import {useStore} from "vuex";
const store = useStore();
const coll = () => {store.commit('isCollapse')}
</script>
<script>
import router from "@/router/router";

export default {
  name: "Header",
  data() {
    return {
      header:60,
      tags:40
    }
  },
  methods:{
    test() {
      sessionStorage.removeItem('token')
      router.push({path:'/login'})
    }
  }
}
</script>

<style scoped>
#tag{
  border-bottom: solid 1px #f5f6f8;
}
#head{
  box-shadow:0px 14px 10px -20px #000;
}
.rowT{
  height: 100%;
}
#userUrl:hover{
  background-color: #f3f6fb;
}
</style>